<form [formGroup]="addThingForm" (ngSubmit)="onAddThing()">
  <h1 mat-dialog-title>Add thing</h1>
  <div mat-dialog-content fxLayout="column">
    <input type="hidden" formControlName="id">
    <mat-form-field *ngIf="!editMode">
      <mat-select placeholder="Thing type" formControlName="type">
        <mat-option value="app">
          App
        </mat-option>
        <mat-option value="device">
          Device
        </mat-option>
      </mat-select>
      <mat-error *ngIf="addThingForm.get('type').errors?.required">
        Type is required
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input matInput tabindex="1" placeholder="Name" formControlName="name" />
      <mat-error *ngIf="addThingForm.get('name').errors?.required">
        Name is required
      </mat-error>
    </mat-form-field>
    <mat-form-field>
      <textarea formControlName="metadata" matInput placeholder="Metadata" matTextareaAutosize matAutosizeMinRows="2"
                matAutosizeMaxRows="5"></textarea>
    </mat-form-field>
  </div>
  <div mat-dialog-actions>
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button mat-raised-button color="primary" type="submit" [disabled]="addThingForm.invalid">Ok</button>
  </div>
</form>
